<template>
    <div>
        <div class="back-color"></div>
        <div class="content">
            <div @click="goback"><i class="iconfont icon-fanhui"></i></div>
            <div class="header">
                <span>评价</span>
            </div>
            <!--list-->
            <div v-for="(i, index) in alllist" :key="index">
                <div class="line"></div>
                <div class="main-box">
                    <div class="main-user-1">
                        <img :src="i.head_img" alt="">
                        <p class="main-a">
                            <span style="color: #0033a0">{{i.nickname}}</span><br/>
                            <!--<span>侃侃</span>-->
                        </p>
                        <p class="m-prise">
                            <!--<i class="iconfont icon-iconfontappreciate" @click="addPrise(i.id)" :class="{active: nowIndex === 0}"> {{i.praise_total}}</i>-->
                        </p>
                        <div class="clear"></div>
                        <div class="main-intro-two">{{i.content}}</div>
                        <div class="time">{{i.add_time}}</div>
                    </div>
                </div>
            </div>
            <!--<div class="bot">-->
                <!--<div class="msg">-->
                    <!--点击加载更多-->
                <!--</div>-->
            <!--</div>-->
            <div style="background-color: #f3f3f3">
                <div class="tips">侃侃电商学院</div>
                <div class="feedback" @click="gofeed">问题反馈</div>
            </div>
        </div>
    </div>
</template>

<script>
import msgbox from '@/common/msgbox.js'
import { Toast } from 'mint-ui'
export default {
  name: 'evaluate',
  data () {
    return {
      alllist: [],
      page: 1,
      ispraise: 0,
      nowIndex: 0
    }
  },
  mounted () {
    this.getView()
  },
  methods: {
    addPrise (id) {
      let that = this
      this.$g.ajax({
        path: 'coursepraises/praises/' + id,
        method: 'post',
        cbSuccess: function (data) {
          that.ispraise = data.memo.ispraise
          if (parseInt(that.ispraise) === 0) {
            Toast({
              message: '取消点赞',
              duration: 1000
            })
          } else {
            Toast({
              message: '点赞成功',
              duration: 1000
            })
          }
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          Toast({
            message: msg,
            position: 'bottom',
            duration: 1000
          })
        }
      })
    },
    goback () {
      this.$router.go(-1)
    },
    gofeed () {
      this.$router.push('/users/feedback')
    },
    getView () {
      let that = this
      this.$g.ajax({
        path: 'Coursecomments/index/' + this.$route.params.id + '/' + this.page,
        method: 'post',
        cbSuccess: function (data) {
          that.alllist = data.memo.list
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          Toast({
            message: msg,
            position: 'bottom',
            duration: 1000
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
    .line{
        height: 4px;
        background-color: #f2f2f2;
    }
    .back-color{
        position: absolute;
        height: 100%;
        background-color: #f3f3f3;
        width: 100%;
        z-index: 1
    }
    .content{
        background-color: #ffffff;
        z-index: 2;
        position: relative
    }
    .icon-fanhui{
        position: absolute;
        color: #383838;
        top: 12px;
        left: 10px;
    }
    .header{
        background-color: #ffffff;
        color: #383838;
        padding: 10px 0;
        text-align: center;
    }
    .main-box{
        padding: 8px 3% 0 3%;
    }
    .main-user-1{
        width: 100%;
        margin-top: 20px;
        border-bottom: 1px solid #f2f4f5;
        img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            float: left;
        }
        .main-a{
            float: left;
            line-height: 20px;
            font-size: 12px;
            color: #999999;
            margin-left: 10px;
        }
        .m-prise{
            float: right;
            i{
                font-size: 12px;
                color: #999999;
            }
          .active{
            color: #0033a0!important;
          }
        }
        .main-intro-two{
            line-height: 24px;
            font-size: 13px;
            color: #333;
            padding-left: 40px;
            word-break: break-all;
            word-wrap: break-word;
        }
        .time{
            line-height: 40px;
            font-size: 13px;
            color: #999999;
            padding-left: 40px;
        }
    }
    .bot{
        background-color: #f3f3f3;
        text-align: center;
        .msg{
            width: 100px;
            background-color: #ffffff;
            color: #0640a4;
            font-size: 12px;
            padding: 12px 50px;
            margin: 0 auto;
            position: relative;
            top: 20px;
        }
    }
    .tips {
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        color: #d4d8d8;
        padding-top: 40px;
    }
    .feedback{
        text-align: right;
        margin-top: 10px;
        padding-bottom: 40px;
        font-size: 12px;
        margin-right: 14px;
        color: #ababab;
    }
</style>
